<template>
	<view class="page">
		<!-- 拼车 -->
		<view class="order_status-wrap order_success">
			<!-- 待支付 S -->
			<view class="l-wrap" v-if="orderDetail.status == 0">
				<image class="icon" src="../static/tobepaid-icon.png" mode=""></image>
				<text v-if="countDownStartTime">待支付，倒计时：{{countDownStartTime || ''}}</text>
				<text v-else>待支付，订单已超时</text>
			</view>
			<!-- 待支付 E -->

			<!-- 待确认 S -->
			<view class="l-wrap" v-if="orderDetail.status == 1">
				<image class="icon" src="../static/loading-icon.png" mode=""></image>
				<text>等待平台确认车辆</text>
			</view>
			<!-- 待确认 E -->

			<!-- 未出行 S -->
			<view class="l-wrap" v-if="orderDetail.status==2">
				<image class="icon" src="../static/loading-icon.png" mode=""></image>
				<text>等待平台分配车辆</text>
			</view>
			<view class="l-wrap" v-if="orderDetail.status==3">
				<image class="icon" src="../static/success-icon.png" mode=""></image>
				<text>已分配司机车辆，请耐心等待并保持电话畅通</text>
			</view>
			<view class="l-wrap" v-if="orderDetail.status==10">
				<image class="icon" src="../static/loading-icon.png" mode=""></image>
				<text>订单已超时，请联系客服进行处理</text>
			</view>
			<!-- 未出行 E -->

			<!-- 已出行 S -->
			<view class="l-wrap" v-if="[4,5,6,9].includes(orderDetail.status - 0)">
				<image v-if="orderDetail.status == 4" class="icon" src="../static/loading-icon.png" mode=""></image>
				<view v-if="orderDetail.status == 4">出行中</view>

				<image v-if="orderDetail.status == 6 ||orderDetail.status == 9" class="icon" src="../static/success-icon.png" mode=""></image>
				<view v-if="orderDetail.status == 6 || orderDetail.status == 9">订单已完成 <text v-if="orderDetail.status == 9" style="color:#FFE594;">（追加订单已支付）</text></view>
				<image v-if="orderDetail.status == 5" class="icon" src="../static/tobeeva-icon.png" mode=""></image>
				<view v-if="orderDetail.status == 5">待评价</view>
			</view>
			<!-- 已出行 E -->

			<!-- 已取消 S -->
			<view class="l-wrap" v-if="orderDetail.status == 7">
				<image class="icon" src="../static/fail-icon.png" mode=""></image>
				<text>订单已取消</text>
			</view>
			<!-- 已取消 E -->

			<!-- 追加订单 S -->
			<view class="l-wrap" v-if="orderDetail.status == 8">
				<image class="icon" src="../static/success-icon.png" mode=""></image>
				<text>订单已完成 <text style="color:#FFE594;">（追加订单待支付）</text> </text>
			</view>
			<view class="r-wrap" v-if="orderDetail.status == 8">
				<uni-icons class="help-icon" type="help" color="#fff" size="24" @click="handleGoFeeDescription"></uni-icons>
			</view>
			<!-- 追加订单 E -->

		</view>

		<view class="info-wrap">
			<view class="top-dack"></view>

			<view class="info tp-w690">
				<view class="info_top-wrap">
					<text class="type">拼车</text>
					<text class="time"> {{busInfo.time || ''}}</text>
					<view class="person">
						<uni-icons class="person-icon" type="person-filled" color="#CCCCCC" size="24"></uni-icons>
						<text>{{busInfo.number || ''}}人</text>
					</view>
				</view>
				<view class="info_content-wrap">
					<view class="address-wrap">
						<view class="step-wrap">
							<view class="dot dot_from"></view>
							<view class="dot dot_to"></view>
						</view>
						<text class="from txt ellispsis1">{{busInfo.startStation || ''}}</text>
						<text class="to txt ellispsis1">{{busInfo.endStation || ''}}</text>
						<view class="time-wrap">
							<text class="time"><text style="color: #666;">备注：</text>{{busInfo.remark || ''}}</text>
						</view>
					</view>
					<view class="ticket-wrap">
						<view class="ticket">
							<view class="price"><text style="font-size: 24rpx;">￥</text>{{busInfo.price || ''}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 司机信息展示 S -->
		<CommonDriverInfo :info="orderDetail.driverSimpleVo" v-if="orderDetail.driverSimpleVo"></CommonDriverInfo>
		<!-- 司机信息展示 E -->

		<!-- 客服电话 S -->
		<view class="service_phone-wrap tp-w690" @click="handleTakePhone">
			<view class="type">客服电话</view>
			<image class="phone-icon" src="../../static/imgs/icons/phone1-icon.png" mode=""></image>
		</view>
		<!-- 客服电话 E -->

		<!-- 乘车人信息S -->
		<view class="content-wrap tp-w690">
			<view class="rider_info-wrap">
				<view class="common_tit-wrap">
					<view class="l-wrap">乘车人信息</view>
					<view class="r-wrap"></view>
				</view>
				<view class="driver_list" :style="{height: showMoreDriver?`${100*riderList.length}rpx`:'100rpx'}">
					<view class="driver_item" v-for="(it_r,in_r) in riderList" :key="in_r">
						<text class="name">{{it_r.passengerName}}</text>
						<view class="num-wrap">
							<text class="phone">{{it_r.phone}}</text>
							<text class="ID">{{it_r.certificateNumber}}</text>
						</view>
					</view>
				</view>

				<view v-if="riderList.length > 1">
					<view class="more_rider" @click="handleSwithMoreDriver" v-if="!showMoreDriver">
						查看更多<image class="showmore-icon" src="../static/showmore-icon.png" mode="aspectFill"></image>
					</view>
					<view class="more_rider" @click="handleSwithMoreDriver" v-else>
						收起更多<image class="showmore-icon" src="../static/showmore-un-icon.png" mode="aspectFill"></image>
					</view>
				</view>

			</view>
		</view>
		<!-- 乘车人信息E -->

		<!-- 购买保险 S -->
		<view class="common-wrap tp-w690" v-if="orderStatus==='toBePaid' && orderDetail.insuranceAndServerVoList !== 0">
			<view class="input-wrap" v-for="(it_i, in_i) in orderDetail.insuranceAndServerVoList" :key="in_i">
				<view class="l-wrap">
					<view class="icon">
						<image src="../../static/imgs/icons/choose1-icon.png" mode="aspectFill"></image>
					</view>
					<view>购买保险<text class="terms" @click="handleGoInsuranceDetail(it_i)">《{{it_i.name}}》</text></view>
				</view>
				<view class="price">￥{{it_i.price}}</view>
			</view>
		</view>
		<!-- 购买保险 E -->

		<!-- 支付明细S -->
		<view class="content-wrap tp-w690">
			<view class="rider_info-wrap">
				<view class="common_tit-wrap">
					<view class="l-wrap">支付明细</view>
					<view class="r-wrap"></view>
				</view>
				<view class="service_list" :style="{height: showMoreOrderInfo?`${90*(3 + orderDetail.insuranceAndServerVoList.length + riderList.length)}rpx`:'90rpx'}">
					<!-- <view class="service_list" :style="{height: showMoreOrderInfo?`${90*(2)}rpx`:'90rpx'}"> -->
					<!-- <view class="service_item">
						<text class="name">票价</text>
						<text class="price">{{orderDetail.pincheSimpleVo.number}}人 * {{orderDetail.pincheSimpleVo.pinPrice}}/公里(元) *
							{{orderDetail.pincheSimpleVo.mile}}公里</text>
					</view> -->

					<!-- 乘车人 -->
					<view class="service_item" v-for="(item,index) in riderList" :key="index">
						<view class="level_align">
							<text class="name tp-mr20">{{item.passengerName}}</text>
							<text>{{item.name}}</text>
						</view>
						<text class="price">￥{{item.price}}</text>
					</view>
					<!-- <view class="service_item">
						<text class="name">补票</text>
						<text class="price flex-1 flex flex_end" v-if="(orderDetail.pincheSimpleVo && orderDetail.pincheSimpleVo.pinNum) > (orderDetail.pincheSimpleVo && orderDetail.pincheSimpleVo.number) ">（{{orderDetail.pincheSimpleVo.pinNum}}人-{{orderDetail.pincheSimpleVo.number}}人）
							* {{orderDetail.pincheSimpleVo.pinPrice}}/公里(元) * {{orderDetail.pincheSimpleVo.mile}}公里</text>
						<text class="price" v-else>0元</text>
					</view> -->
					<view class="service_item">
						<text class="name">优惠券</text>
						<text class="price">-￥{{orderDetail.qrCodeVo && orderDetail.qrCodeVo.couponPrice}}</text>
					</view>
					<!-- <view class="service_item">
						<text class="name">积分抵扣</text>
						<text class="price">-￥{{orderDetail.qrCodeVo.jifen}}</text>
					</view> --> 
					<!-- 保险列表 --> 
					<view class="service_item" v-for="(item,index) in orderDetail.insuranceAndServerVoList" :key="index">
						<text class="name">{{item.name}}</text>
						<text class="price">￥{{item.price}} * {{orderDetail.pincheSimpleVo.number}}人</text>
					</view>
					<view class="service_item">
						<text class="name">实付款</text>
						<text class="price" style="color:#FF4A37;font-size: 30rpx;">￥{{orderDetail.qrCodeVo && orderDetail.qrCodeVo.realPay}}</text>
					</view>
				</view>
				<view class="more_rider" @click="handleSwithMoreOrderInfo" v-if="!showMoreOrderInfo">
					查看更多<image class="showmore-icon" src="../static/showmore-icon.png" mode="aspectFill"></image>
				</view>
				<view class="more_rider" @click="handleSwithMoreOrderInfo" v-else>
					收起更多<image class="showmore-icon" src="../static/showmore-un-icon.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 支付明细E -->

		<!-- 押金退还 S -->
		<view class="content-wrap tp-w690" v-if="orderStatus==='completed'">
			<view class="input-wrap">
				<text>押金退还</text>
				<text class="price">￥200</text>
			</view>
		</view>
		<!-- 押金退还 E -->

		<!-- 退款原因 S -->
		<view class="content-wrap tp-w690" v-if="orderStatus==='cancelled'">
			<view class="rider_info-wrap">
				<view class="common_tit-wrap">
					<view class="l-wrap">退款原因</view>
					<view class="r-wrap"></view>
				</view>
				<view class="back_reason">{{orderDetail.qrCodeVo.reason}}</view>
			</view>
		</view>
		<!-- 退款原因 E -->

		<!-- 二维码展示 S -->
		<CommonCode v-if="orderStatus!=='toBePaid' && orderStatus!=='audit'" :code="orderDetail.qrCodeVo.pingzheng" :used="['traveled', 'cancelled', 'addOrder'].includes(orderStatus)"
		 :expired="orderStatus==='cancelled'" :url="/^[http | https]/.test(orderDetail.qrCodeVo && orderDetail.qrCodeVo.qrCode && orderDetail.qrCodeVo.qrCode) ? orderDetail.qrCodeVo.qrCode : (wwwImgUrl + orderDetail.qrCodeVo.qrCode)" :timeOut="timeOut" :codeStatus="orderDetail.status-0 >= 8 ? '核销码' : '核销码'"></CommonCode>
		<!-- 二维码展示 E -->


		<!-- 订单交易详情 S -->
		<view class="order_info-wrap tp-w690">
			<view class="order_num">订单号：{{orderDetail.qrCodeVo && orderDetail.qrCodeVo.orderNo}} </view>
			<view class="order_date">下单时间：{{orderDetail.qrCodeVo && orderDetail.qrCodeVo.createTime}}</view>
			<view class="order_date" v-if="orderStatus !== 'toBePaid'">支付时间：{{orderDetail.qrCodeVo && orderDetail.qrCodeVo.payTime}}</view>
			<view class="order_paytype" v-if="orderStatus!=='toBePaid' && orderStatus!=='audit'">支付方式：{{orderDetail.qrCodeVo && orderDetail.qrCodeVo.payType}}</view>
			<view class="order_paytype" v-if="orderStatus==='cancelled'">取消时间：{{orderDetail.qrCodeVo && orderDetail.qrCodeVo.cancelTime}}</view>
			<view class="order_paytype" v-if="(orderStatus==='traveled' && traveledStatus.orderCompleted) || orderStatus==='addOrder'">核销时间：{{orderDetail.qrCodeVo && orderDetail.qrCodeVo.chargeOffTime}}
			</view>
		</view>
		<!-- 订单交易详情 E -->

		<!-- 追加订单 S -->
		<view class="content-wrap tp-w690" v-if="(orderStatus==='traveled' && traveledStatus.orderCompleted &&  traveledStatus.orderCompletedAndAdditionanOrderPaid) || orderStatus==='addOrder'">
			<view class="input-wrap" @click="handleGoAddOrderDetail">
				<text>追加订单</text>
				<view class="price" style="color:#FF4A37;">{{orderDetail.zhuijiaTotal}}元 <uni-icons type="arrowright" size="20"
					 color="#999"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 追加订单 E -->


		<view class="btm_btn-wrap" v-if="[0,1,2,3,5,6,8].includes(orderDetail.status -0)">
			<view v-if="[0,1,2,3].includes(orderDetail.status -0) " class="btn cancle" @click="getCancelCarpoolOrderShouldPayPay">取消订单</view>
			<view v-if="[0].includes(orderDetail.status -0) " class="btn pay" @click="handlePay">支付</view>
			<view v-if="[6].includes(orderDetail.status -0) " class="btn pay" @click="handleGoTravelEvaluation">查看评价</view>
			<view v-if="[5].includes(orderDetail.status -0) " class="btn pay" @click="handleScore">打分评价</view>
			<view v-if="[8].includes(orderDetail.status -0)" class="btn add_pay" @click="handlePay">支付￥{{orderDetail.zjNoPayTotal}}</view>
		</view>

		<CommonBackReasonSubmit ref="submitReason" @confirm="handleSubmitBackReason"></CommonBackReasonSubmit>

		<CommonBackReasonSubmitMoney :price="cancleOrderShouldPayMoney" ref="submitReasonMoney" @confirm="handleSubmitBackReasonPayMoney"></CommonBackReasonSubmitMoney>

		<CommonScoreEvaluation ref="score" @confirm="handleSubmitScore"></CommonScoreEvaluation>

		<CommonPay ref="commonPayAdd" :price="orderDetail.zjNoPayTotal" :orderInfo="orderInfo" @payMoney="payMoneyZui" v-if="orderStatus==='addOrder'"
		 @wechatPaySuccess="wechatPaySuccess"></CommonPay>
		<CommonPay ref="commonPay" :price="orderDetail.qrCodeVo && orderDetail.qrCodeVo.realPay" :orderInfo="orderInfo" @payMoney="payMoney" v-else
		 @wechatPaySuccess="wechatPaySuccess"></CommonPay>

		<RentAuditFail ref="audioFail" :config="audioFailConfig" @confirm="handleResubmit" @cancel="getCancelCarpoolOrderShouldPayPay"></RentAuditFail>

		<!-- 客服服务电话痰喘 S-->
		<CommonServicePhone ref="takePhone"></CommonServicePhone>
		<!-- 客服服务电话痰喘 E-->
	</view>
</template>

<script>
	import utils from '../../utils/utils.js'
	import CommonBackReasonSubmit from '@/components/common/common-backReason-submit.vue'
	import CommonBackReasonSubmitMoney from '@/components/common/common-backReason-submit-money.vue'
	import CommonScoreEvaluation from '@/components/common/common-scoreEvaluation.vue'
	import CommonPay from '@/components/common/common-pay.vue'
	import RentAuditFail from '@/components/user/rent-auditFail.vue'
	import CommonCode from '@/components/common/common-code.vue'
	import CommonDriverInfo from '@/components/common/common-driverInfo.vue'
	import CommonServicePhone from '@/components/common/common-servicePhone.vue'
	export default {
		components: {
			CommonBackReasonSubmit,
			CommonBackReasonSubmitMoney,
			CommonScoreEvaluation,
			CommonPay,
			RentAuditFail,
			CommonCode,
			CommonDriverInfo,
			CommonServicePhone
		},
		data() {
			return {
				imgUrl: this.$url,
				orderId: 0,
				orderStatus: 'toBePaid', // 订单状态
				audioFailConfig: {
					cancleText: '取消订单',
					confirmText: '重新提交',
					content: '驾驶员金小鱼的驾驶证信息有误，请重新提交？'
				},
				showMoreOrderInfo: false, //  是否查看更多支付明细
				showMoreTimeOutDetail: false, //  是否查看更多超时明细
				showMoreService: false, //  是否查看更多其他服务
				showMoreDriver: false, //  是否查看更多乘车人
				carpoolSuccess: true, // 拼车成功的状态
				traveledStatus: { // 已出行
					toBeEvaluated: false, // 待评价
					orderCompleted: true, // 订单已完成
					orderCompletedAndAdditionanOrderPaid: true, // 订单已完成（追加订单已支付）
				},
				orderDetail: {}, // 订单详情
				riderList: [], // 乘车人列表
				busInfo: {}, // 班车信息
				serviceList: [], // 服务列表
				countDownStartTime: '00:00',
				timer: null,
				timeOut: false,
				cancleOrderShouldPayMoney: 0,
			};
		},
		onLoad(opt) {
			this.orderId = opt && opt.id
			this.orderStatus = opt && opt.orderStatus
			this.getOrderDetail()
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getOrderDetail()
		},
		computed: {
			orderInfo() {
				let o = {
					orderNo: this.orderId,
					type: 2
				}
				return o
			}
		},
		methods: {
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功'
				})
				this.getOrderDetail()
			},
			cancleOrderCommon(reason) { // 取消订单接口合并统一
				const _this = this
				_this.$http.get(_this.$api.cancelCarpoolOrder, {
					orderNo: _this.orderDetail.qrCodeVo.orderNo,
					reason
				}).then(res => {
					if (res.code === 200) {
						let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
						console.log(routes);
						if (routes.length == 1) { // 直接来的详情
							console.log(1111);
							uni.switchTab({
								url: '../../pages/tabbar/home'
							})
						} else {
							console.log(1111);
							uni.navigateBack({
								delta: 1
							});
						}
					}
				})
			},
			handleSwithMoreDriver() {
				this.showMoreDriver = !this.showMoreDriver
			},
			handleSwithMoreService() {
				this.showMoreService = !this.showMoreService
			},
			handleSwithMoreOrderInfo() {
				this.showMoreOrderInfo = !this.showMoreOrderInfo
			},
			handleSwithMoreTimeOutDetail() {
				this.showMoreTimeOutDetail = !this.showMoreTimeOutDetail
			},
			handleScore() { // 打分评价
				this.$refs.score.show()
			},
			handleGoViewScore() { // 跳转到司机评价
				uni.navigateTo({
					url: '../busTravelEvaluation?id=' + this.orderId
				});
			},
			handleSubmitScore(val) { // 提交评分
				const {
					rate,
					reason
				} = val
				this.$http.post(this.$api.evaluate, {
					type: 2,
					orderNo: this.orderId,
					grade: rate * 20,
					context: reason
				}).then(res => {
					if (res.code === 200) {
						this.getOrderDetail()
					}
				})
			},
			handleConfirmCancleOrder() {
				console.log('handleConfirmCancleOrder');
			},
			handleShowAduitFailReason() { // 查看审核失败原因
				this.$refs.audioFail.show()
			},
			handleResubmit() { // 确认重新提交订单  跳转到司机信息补全页面
				console.log('确认重新提交信息');
			},
			handleShowTip() { // 温馨提示弹窗
				this.$refs.tip.show()
			},
			handleContactCustomerService() { // 联系客服
				console.log('联系客服');
			},
			handleShowBackReason() { // 退款原因弹窗
				this.$refs.backReason.show()
			},
			handlPreviewCode() {
				this.$refs.previewCode.open()
			},
			handleClosePreviewCode() {
				this.$refs.previewCode.close()
			},
			handleGoPickupDetail() {
				uni.navigateTo({
					url: '../pickupDetail'
				});
			},
			handlePay() {
				const _this = this
				if (_this.orderDetail.status == 8) {
					_this.$store.commit('upOrderPayType', 'carpoolAdd')
					_this.$refs.commonPayAdd.show()
				} else {
					// #ifdef MP-WEIXIN
					uni.requestSubscribeMessage({
						tmplIds: ['jT4idTW1Jb_UNM1PI2mPSIttc26qnirW8LGuH_kjx7s'],
						success(res) {
							_this.submitWxNotifyConfirm('jT4idTW1Jb_UNM1PI2mPSIttc26qnirW8LGuH_kjx7s', res[
								'jT4idTW1Jb_UNM1PI2mPSIttc26qnirW8LGuH_kjx7s'])
							// #endif
							_this.$refs.commonPay.show()
							// #ifdef MP-WEIXIN
						}
					})
					// #endif
				}
			},
			handleGoFeeDescription() { // 跳转到费用说明
				uni.navigateTo({
					url: '../feeDescription?type=5'
				});
			},
			handleSubmitBackReason(reason) {
				const _this = this
				_this.cancleOrderCommon(reason)
			},
			getCancelCarpoolOrderShouldPayPay() {
				const _this = this
				if (_this.orderDetail.status == 0) {
					// #ifdef MP-WEIXIN
					uni.requestSubscribeMessage({
						tmplIds: ['58yzFNiV-am9kUCIMJjJV1DVDbS_M27xeXkhG6Q_ruc'],
						success(res) {
							_this.submitWxNotifyConfirm('58yzFNiV-am9kUCIMJjJV1DVDbS_M27xeXkhG6Q_ruc', res[
								'58yzFNiV-am9kUCIMJjJV1DVDbS_M27xeXkhG6Q_ruc'])
							// #endif
							_this.$http.get(_this.$api.cancelCarpoolOrderShouldPayPay + _this.orderDetail.qrCodeVo.orderNo).then(res => {
								if (res.code === 200) {
									_this.cancleOrderShouldPayMoney = res.data.fee
									// _this.cancleOrderCommon(); // 直接取消订单 不收服务费，
									_this.$http.get(_this.$api.cancelCarpoolOrder, {
										orderNo: _this.orderDetail.qrCodeVo.orderNo,
										// reason
									}).then(res => {
										if (res.code === 200) {
											let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
											if (routes.length == 1) { // 直接来的详情
												uni.switchTab({
													url: '../../pages/tabbar/home'
												})
											} else {
												uni.navigateBack({
													delta: 1
												});
											}
										}
									})
								}
							})
							// #ifdef MP-WEIXIN
						}
					})
					// #endif
				} else {
					_this.$http.get(_this.$api.cancelCarpoolOrderShouldPayPay + _this.orderDetail.qrCodeVo.orderNo).then(res => {
						if (res.code === 200) {
							_this.cancleOrderShouldPayMoney = res.data.fee

							switch (_this.orderDetail.status - 0) {
								case 0:
									// _this.cancleOrderCommon(); // 直接取消订单 不收服务费，
									// break;
								case 3:
									_this.$refs.submitReasonMoney.show() // 提交原因，收取服务费
									break;
								default:
									{
										// _this.$refs.submitReason.show() // 提交原因 不收服务费，
										_this.$refs.submitReasonMoney.show() // 提交原因，收取服务费
									}
							}
						}
					})
				}
			},
			handleSubmitBackReasonPayMoney(reason) {
				const _this = this
				_this.cancleOrderCommon(reason)
			},
			handleGoTravelEvaluation() { // 点击跳转到评价详情
				uni.navigateTo({
					url: '../busTravelEvaluation?id=' + this.orderId
				});
			},
			handleGoAddOrderDetail() { // 跳转到追加订单详情
				let orderAdd = JSON.stringify(this.orderDetail.zhuijiaOrderVoList)
				uni.navigateTo({
					url: '../../pagesTravel/addOrderDetail?orderInfo=' + orderAdd
				});
			},
			handleTakePhone() { // 客服电话弹窗
				this.$refs.takePhone.show()
			},
			handleGoInsuranceDetail(item, type) { // 跳转到保险详情
				let obj = {
					type: 1,
					id: item.id,
					title: item.name || item.title
				}
				if (type) {
					obj.type = type
				}
				uni.navigateTo({
					url: '../../pagesTravel/serviceDetail?info=' + JSON.stringify(obj),
				});
			},
			getOrderDetail() {
				this.$http.get(this.$api.getCarpoolOrderDetail + this.orderId).then(res => {
					uni.stopPullDownRefresh();
					if (res.code === 200) {
						this.orderDetail = res.data
						this.riderList = res.data.passengerSimpleVoList
						this.busInfo = res.data.pincheSimpleVo
						this.serviceList = [...res.data.insuranceAndServerVoList]
						this.carpoolSuccess = this.orderDetail.status == 3 ? true : false // 是否已经分配司机 （3已分配司机）
						this.traveledStatus.toBeEvaluated = this.orderDetail.status == 5 ? true : false // 已出行--待评价
						this.traveledStatus.orderCompletedAndAdditionanOrderPaid = this.orderDetail.status == 9 ? true : false // 已出行--追加订单已支付
						this.traveledStatus.orderCompleted = this.orderDetail.status == 6 ? true : false // 已出行--订单已完成
						/* 订单状态转换 S */
						switch (res.data.status) {
							case '0':
								this.orderStatus = 'toBePaid'
								break
							case '1':
								this.orderStatus = 'toBoConfirmed'
								break
							case '2':
								this.orderStatus = 'noTraveling'
								break
							case '3':
								this.orderStatus = 'noTraveling'
								break
							case '4':
								this.orderStatus = 'traveled'
								break
							case '5':
								this.orderStatus = 'traveled'
								break
							case '6':
								this.orderStatus = 'traveled'
								break
							case '7':
								this.orderStatus = 'cancelled'
								break
							case '8':
								this.orderStatus = 'addOrder'
								break
							case '9':
								this.orderStatus = 'addOrder'
								break
							case '10':
								this.timeOut = true
								this.orderStatus = 'noTraveling'
								break
						}
						/* 订单状态转换 E */
						if (this.orderDetail.status == 0) {
							this.timer = setInterval(() => { // 未支付订单(验证订单是否超时)
								this.countDownStartTime = utils.getCountDownTime(res.data.qrCodeVo.createTime)
							}, 1000)
						}
					}
				})
			},
			cancleOrder(reason) {
				let api = this.$api.cancelCarpoolOrderNoPay + this.orderDetail.qrCodeVo.orderNo
				if (this.orderDetail.status == 3) { // 司机已经分配，此时取消订单需要付费
					api = this.$api.cancelCarpoolOrderPay + `?orderNo=${this.orderDetail.qrCodeVo.orderNo}&reason=${reason}`
				} else if (this.orderDetail.status == 2 || this.orderDetail.status == 1) {
					api = this.$api.cancelCarpoolOrderPayNoDreiver + `?orderNo=${this.orderDetail.qrCodeVo.orderNo}&reason=${reason}`
				}
				this.$http.get(api).then(res => {
					if (res.code === 200) {
						uni.navigateBack({
							delta: 1
						});
					}
				})
			},
			// 订单积分支付
			payMoney(pwd) {
				this.$http.post(this.$api.payCarpoolOrder, {
					orderNo: this.orderDetail.qrCodeVo.orderNo,
					payWord: pwd
				}).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.$refs.commonPay.closeKeyBoard()
						uni.showToast({
							title: '支付成功'
						})
						this.getOrderDetail() // 更新订单状态
					}
				})
			},
			// 追加订单积分支付
			payMoneyZui(pwd) {
				this.$http.post(this.$api.payCarpoolZuiJiaOrder, {
					orderNo: this.orderDetail.qrCodeVo.orderNo,
					payWord: pwd
				}).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.$refs.commonPayAdd.closeKeyBoard()
						uni.showToast({
							title: '支付成功'
						})
						this.getOrderDetail() // 更新订单状态
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-top: 130rpx;
		padding-bottom: 118rpx;
	}

	.order_status-wrap {
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		color: #fff;
		height: 130rpx;
		font-size: 30rpx;
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		left: 0;
		right: 0;
		z-index: 9;
		background-color: $blue;

		.icon {
			height: 36rpx;
			width: 36rpx;
			margin-right: 20rpx;
		}

		&.order_success {
			display: flex;
			justify-content: space-between;

			.l-wrap {
				display: flex;
				align-items: center;
			}

			.r-wrap {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				color: #fff;
				font-size: 26rpx;

				.help-icon {
					margin-right: 20rpx;
				}
			}
		}
	}

	.info-wrap {
		height: 330rpx;
		background: #f5f5f5;
		position: relative;

		.top-dack {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 90rpx;
			background-color: $blue;
			z-index: 1;
		}

		.info {
			// height:342rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 2;
			background: #fff;
			border-radius: 12rpx;
			padding: 40rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;

			.info_top-wrap {
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.type {
					padding: 0 10rpx;
					background-color: #FFF2E0;
					color: $yellow;
					font-size: 22rpx;
					border-radius: 8rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					margin-right: 20rpx;
				}

				.date-wrap {
					flex: 2;
					display: flex;
					justify-content: space-around;
					align-items: center;
					font-weight: bold;

					.duration {
						width: 132rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						font-size: 22rpx;
						border-radius: 18rpx;
						border: 1px solid #ebebeb;
						font-weight: normal;
					}
				}

				.person {
					.person-icon {
						margin-right: 20rpx;
					}
				}
			}

			.info_content-wrap {
				display: flex;
				flex: 1;
				justify-content: space-between;
				padding-top: 20rpx;

				.address-wrap {
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;
					font-size: 30rpx;
					font-weight: bold;
					position: relative;

					.step-wrap {
						display: flex;
						justify-content: space-between;
						flex-direction: column;
						height: 90rpx;
						position: absolute;
						top: 10rpx;
						left: 0rpx;

						&::before {
							content: '';
							position: absolute;
							left: 50%;
							transform: translateX(-50%);
							height: 100%;
							width: 1px;
							background-color: #ccc;
						}

						.dot {
							height: 20rpx;
							width: 20rpx;
							border: 1px solid #ccc;
							border-radius: 50%;
							position: relative;

							&::before {
								content: '';
								position: absolute;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
								height: 100%;
								width: 100%;
								border-radius: 50%;
								background-color: #fff;
							}
						}
					}

					.txt {
						margin-bottom: 29rpx;
					}

					.from,
					.to {
						padding-left: 44rpx;
					}

					.time-wrap {
						padding-left: 44rpx;
						font-size: 30rpx;
						font-weight: normal;
						display: flex;
						align-items: center;
					}
				}

				.ticket-wrap {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					text-align: right;
					width: 130rpx;

					.price {
						margin-top: 20rpx;
						font-size: 36rpx;
						font-weight: bold;
						color: #FF4A37;
					}
				}
			}
		}
	}

	.service_phone-wrap {
		margin-top: 20rpx;
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		font-size: 30rpx;
		font-weight: 500;
		background-color: #fff;

		.phone-icon {
			height: 44rpx;
			width: 44rpx;
		}
	}

	.common-wrap {
		border-radius: 12rpx;
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		.input-wrap {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #ebebeb;
			font-size: 30rpx;

			&:last-child {
				border: none;
			}

			.l-wrap {
				display: flex;
				align-items: center;

				.icon {
					display: inline-block;
					height: 30rpx;
					width: 30rpx;
					margin-right: 20rpx;
				}

				.terms {
					color: $blue;
				}
			}

			.ul_service {
				display: flex;

				.li_service {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					margin-left: 80rpx;

					.txt {
						margin-left: 20rpx;
					}
				}
			}

			.type {
				font-size: 30rpx;
			}

			.input {
				flex: 1;
				text-align: right;
				font-size: 30rpx;
				display: flex;

				input {
					padding-right: 6rpx;
				}
			}
		}
	}

	.content-wrap {
		margin-top: 20rpx;

		.input-wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 88rpx;
			font-size: 30rpx;
			padding: 0 30rpx;
			background-color: #fff;
			border-radius: 12rpx;
			box-sizing: border-box;

			.r-wrap {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.price {
					color: $red;
				}
			}
		}

		.remark {
			width: 690rpx;
			border-radius: 12rpx;
			background-color: #fff;
			font-size: 30rpx;
			line-height: 60rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.txt {
				padding: 100rpx;
			}
		}

		.rider_info-wrap {
			width: 690rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx 30rpx 0;
			box-sizing: border-box;

			.common_tit-wrap {
				box-sizing: border-box;

				.l-wrap {
					font-size: 28rpx;
					font-weight: 500;
				}
			}

			.back_reason {
				font-size: 30rpx;
				font-weight: 500;
				line-height: 50rpx;
				padding: 20rpx 0;
			}

			.driver_list {
				transition: all 0.3s ease;
				overflow: hidden;

				.driver_item {
					display: flex;
					align-items: center;
					height: 100rpx;
					font-size: 28rpx;
					font-weight: 500;
					border-bottom: 1px solid #ebebeb;
					justify-content: space-between;

					.name {
						display: inline-block;
						font-size: 30rpx;
						font-weight: bold;
						width: 140rpx;
						padding-right: 20rpx;
						box-sizing: border-box;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}

					.num-wrap {
						flex: 1;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}
			}

			.service_list {
				transition: all 0.3s ease;
				overflow: hidden;

				.service_item {
					font-size: 30rpx;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #ebebeb;
				}
			}

			.more_rider {
				height: 83rpx;
				line-height: 83rpx;
				text-align: center;
				color: #999;
				border-top: 1px solid #ebebeb;
			}
		}
	}


	.order_info-wrap {
		margin-top: 20rpx;
		line-height: 50rpx;
		width: 690rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.btm_btn-wrap {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 98rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 30rpx;
		z-index: 3;
		background-color: #fff;
		padding: 0 30rpx;
		box-shadow: 0 2px 5px 1px #ebebeb;

		.btn {
			padding: 0 30rpx;
			min-width: 60rpx;
			border-radius: 8rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;

			&.cancle {
				border: 1px solid #ccc;
				color: #ccc;
			}

			&.pay {
				color: #fff;
				background-color: $blue;
				margin-left: 20rpx;
			}

			&.add_pay {
				background-color: $yellow;
				color: #fff;
				margin-left: 20rpx;
			}
		}
	}
</style>
